import { Tips } from '@nutui/icons-react';
import { Button, Image, Input, Popup } from '@nutui/nutui-react';
import { PopupProps } from '@nutui/nutui-react/dist/types/packages/popup';
import { ReactNode, useEffect, useMemo, useState } from 'react';

import { render } from '@/application/utils/render';

interface Props extends Partial<PopupProps> {
  tips: string;
  content: ReactNode;
}
export const AwardDialog = ({ visible, onClose, tips, content }: Props) => {
  return (
    <Popup
      lockScroll
      visible={visible}
      onClose={onClose}
      style={{
        height: '100%',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        zIndex: '2007',
        background: 'transparent'
      }}
    >
      <div>
        <div className="relative mx-auto w-73.75 overflow-hidden rounded-lg bg-white">
          <div className="flex h-7.5 items-center bg-[#F0FFB1] px-2.5 text-xs text-[#333333]">
            <Tips className="mr-2" />
            {tips}
          </div>
          <div>{content}</div>
        </div>
        <Image
          onClick={onClose}
          src={new URL('/images/home/close_icon.png', import.meta.env.VITE_IMG_BASE_URL).href}
          className="mx-auto mt-7.5 h-8.75 w-8.75"
        />
      </div>
    </Popup>
  );
};

let show = false;

AwardDialog.show = (props: any) => {
  if (show) return;
  const body = document.body;

  const container = document.createElement('div');
  body.appendChild(container);
  show = true;
  let destroy: VoidFunction = () => undefined;
  const Temp = () => {
    const [visible, setVisible] = useState(false);

    useEffect(() => {
      setVisible(true);
    }, []);

    destroy = () => {
      show = false;
      setVisible(false);
    };
    return (
      <AwardDialog
        {...props}
        onClose={() => {
          show = false;
          setVisible(false);
        }}
        visible={visible}
      />
    );
  };
  render(<Temp />, container);

  return destroy;
};
